<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器(pseudo-class selector)</title>
  <!-- 
    CSS的伪类选择器（pseudo-class selector）用于选择元素的特殊状态或位置。以下是一些常见的伪类选择器及其说明： 
 
      1. :hover - 当鼠标悬停在元素上时应用样式。 
      2. :active - 当元素被激活（例如被点击）时应用样式。 
      3. :focus - 当元素获得焦点时应用样式。 
      4. :visited - 当元素被访问过时应用样式。 
      5. :link - 选择未被访问的链接。

      6. :first-child - 选择作为其父元素的第一个子元素的元素。 
      7. :last-child - 选择作为其父元素的最后一个子元素的元素。 
      8. :nth-child(n) - 选择作为其父元素的第 n 个子元素的元素。 
      9. :nth-of-type(n) - 选择作为其父元素的第 n 个指定类型的子元素的元素。 
      10. :not(selector) - 选择不符合指定选择器的元素。
   -->
   <style>
     /* 当鼠标悬停在元素上时应用样式 */
     a:hover {
       color: red;
     }

     /* 当元素被激活（例如被点击）时应用样式 */
     a:active {
       color: gray;
     }

     /* 当元素获得焦点时应用样式 */
     input:focus, a:focus {
       background-color: yellow;
     }

     /* 当元素被访问过时应用样式 */
     a.visited {
       color: green;
     }
     
     /* 选择未被访问的链接 */
     a.link {
       color: saddlebrown;
     }

     /* 选择作为其父元素的第一个子元素的元素 */
     .pseudo-class-selector:first-child {
       font-weight: bold;
     }
   </style>

</head>
<body>
  
  <a href="http://www.baidu.com">百度一下</a>
  <a href="http://www.mi.com">Xiaomi</a>

  <input type="text">

  <div class="pseudo-class-selector">
    CSS的伪类选择器（pseudo-class selector）用于选择元素的特殊状态或位置。
  </div>

</body>
</html>